<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Message</title>
  <!-- 组件样式（全部的） -->
  <link rel="stylesheet" href="../../dist/tdesign.css">
  <!--
    TDesign 图标库，桌面端与移动端用同样的资源
    使用方式：<i class="t-icon t-icon-delete"></i>
  -->
  <li
    nk rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">

</head>

<body>
  <div class="tdesign-demo-wrap">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Message</h1>
      <p class="tdesign-demo-wrap__info">开发者：p_rqpeng</p>
      <p class="tdesign-demo-wrap__info">创建日期：20200512</p>
      <p class="tdesign-demo-wrap__info">说明：tdesign message 组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 默认样式 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">默认</h2>
      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-message">
            <i class="t-icon t-icon-prompt_fill"></i>
            <span class="t-message__inner">默认全局提示</span>
          </div>
        </div>

        <!-- 内容区 End-->

      </div>
    </div>

    <!-- 组件类型 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">类型</h2>
      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">1.常规全局提示：</h2>
          <!-- 内容区 Start-->
          <div class="tdesign-demo-block">
            <div class="t-message">
              <i class="t-icon t-icon-prompt_fill"></i>
              <span class="t-message__inner">用于表示普通操作信息提示</span>
            </div>
          </div>
          <div class="tdesign-demo-block">
            <div class="t-message t-is-success">
              <i class="t-icon t-icon-success_fill"></i>
              <span class="t-message__inner">用于表示操作顺利达成</span>
            </div>
          </div>
          <div class="tdesign-demo-block">
            <div class="t-message t-is-warning">
              <i class="t-icon t-icon-warning_fill"></i>
              <span class="t-message__inner">用于表示操作引起一定后果</span>
            </div>
          </div>
          <div class="tdesign-demo-block">
            <div class="t-message t-is-error">
              <i class="t-icon t-icon-warning_fill"></i>
              <span class="t-message__inner">用于表示操作引起严重的后果</span>
            </div>
          </div>
          <div class="tdesign-demo-block">
            <div class="t-message">
              <i class="t-icon t-icon-help_fill"></i>
              <span class="t-message__inner">用于帮助用户操作的信息提示</span>
            </div>
          </div>
          <div class="tdesign-demo-block">
            <div class="t-message t-is-loading">
              <i class="t-icon t-icon-loading"></i>
              <span class="t-message__inner">用于表示操作正在生效的过程中</span>
            </div>
          </div>

          <!-- 内容区 End-->

      </div>
      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">2.带关闭操作全局提示：</h2>
          <!-- 内容区 Start-->
          <div class="tdesign-demo-block">
            <div class="t-message t-is-closable">
              <i class="t-icon t-icon-prompt_fill"></i>
              <span class="t-message__inner">用于表示普通操作信息提示，可关闭，通常信息较长</span>
              <i class="t-icon t-icon-close"></i>
            </div>
          </div>
          <div class="tdesign-demo-block">
            <div class="t-message t-is-success t-is-closable">
              <i class="t-icon t-icon-success_fill"></i>
              <span class="t-message__inner">用于表示操作顺利达成，可关闭，通常信息较长</span>
              <i class="t-icon t-icon-close"></i>
            </div>
          </div>
          <div class="tdesign-demo-block">
            <div class="t-message t-is-warning t-is-closable">
              <i class="t-icon t-icon-warning_fill"></i>
              <span class="t-message__inner">用于表示操作引起一定后果，可关闭，通常信息较长</span>
              <i class="t-icon t-icon-close"></i>
            </div>
          </div>
          <div class="tdesign-demo-block">
            <div class="t-message t-is-error t-is-closable">
              <i class="t-icon t-icon-warning_fill"></i>
              <span class="t-message__inner">用于表示操作引起严重的后果，可关闭，通常信息较长</span>
              <i class="t-icon t-icon-close"></i>
            </div>
          </div>
          <div class="tdesign-demo-block">
            <div class="t-message t-is-closable">
              <i class="t-icon t-icon-help_fill"></i>
              <span class="t-message__inner">用于用户操作行为的辅助提醒，可关闭，通常信息较长</span>
              <i class="t-icon t-icon-close"></i>
            </div>
          </div>
          <!-- 内容区 End-->

      </div>
    </div>

    <!-- 组件状态 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">组件状态</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <h3 class="tdesign-demo-item--message__body__title"> 1.加载结果展示成功/失败：</h3>
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-message t-is-loading">
            <i class="t-icon t-icon-loading"></i>
            <span class="t-message__inner">用于表示操作正在生效的过程中</span>
          </div>
        </div>
        <div class="tdesign-demo-block">
          <div class="t-message t-is-success">
            <i class="t-icon t-icon-success_fill"></i>
            <span class="t-message__inner">用于表示操作顺利达成</span>
          </div>
        </div>
        <div class="tdesign-demo-block">
          <div class="t-message t-is-error">
            <i class="t-icon t-icon-warning_fill"></i>
            <span class="t-message__inner">用于表示操作失败中断</span>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>
    </div>



    <!-- 组件尺寸 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">组件大小</h2>

      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">1.常规全局提示宽度自适应不做限制：</h3>
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-message">
            <i class="t-icon t-icon-prompt_fill"></i>
            <span class="t-message__inner">用于表示普通操作信息提示</span>
          </div>
        </div>
        <div class="tdesign-demo-block">
          <div class="t-message">
            <i class="t-icon t-icon-prompt_fill"></i>
            <span class="t-message__inner">用于表示普通操作信息提示文案较长文案较长文案较长文案较长文案较长</span>
          </div>
        </div>

        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">2.带关闭操作全局提示最小宽度400px：</h2>
          <!-- 内容区 Start-->

          <div class="tdesign-demo-block">
            <div class="t-message t-is-closable">
              <i class="t-icon t-icon-prompt_fill"></i>
              <span class="t-message__inner">用于表示普通操作信息提示，可关闭</span>
              <i class="t-icon t-icon-close"></i>
            </div>
          </div>

          <!-- 内容区 End-->

      </div>

    </div>

</body>

</html>